<template>
<div class="header">
  我的全部购物车（2）
</div> 
<div class="content">

<div class="products" v-for="(Bigitem,Bigindex) in cartList" :key="Bigindex">
        <!-- <template  v-if="Bigitem.productList.length>0"> -->

  <div class="products__title">
    {{Bigitem.shopName}}
  </div>
  <div class="products__wrapper">
    <div class="products__list">
       <div  v-for="(item,index) in Bigitem.productList"
        :key="item._id" 
         >
      <div class="products__item"
        v-if="(item.count>0) && ( (index<4) || ((index>=4) && Bigitem.openShow) )"
      >
        <img class="products__item__img" :src="item.imgUrl" />
        <div class="products__item__detail">
          <h4 class="products__item__title">{{item.name}}</h4>
          <p class="products__item__price">
            <span>
              <span class="products__item__yen">&yen; </span>
              {{item.price}} x {{item.count}}
            </span>
            <span class="products__item__total">
              <span class="products__item__yen">&yen; </span>
              {{(item.price * item.count).toFixed(2)}}
            </span>
          </p>
        </div>
          </div>
        </div>
      
      
    </div>

  </div>

  <div class="products_open" v-if="Bigitem.openBtn">
      <div class="products_open_content">
        共计{{Bigitem.len}}件/1.4kg
      </div>
      <div class="products_open_btn iconfont" @click="changeOpen(Bigitem)">
        
        {{Bigitem.openShow ? '&#xe65d;' : '&#xe65e;'}}
      </div>
      </div>
  <!-- </template> -->
  </div>


</div>
<Docker :currentIndex="1" />
</template>

<script>
// import { useRoute } from 'vue-router'
import { useCommonCartEffect } from '../../effects/cartEffects'
import Docker from '../../components/Docker'
// import { ref } from 'vue'
export default {
  name: 'cartList',
  components: { Docker },
  setup() {
    const { shopName, productList, cartList } = useCommonCartEffect()
    console.log(cartList)
    for(var i in cartList){
        cartList[i].openShow = false
        cartList[i].openBtn = false
        cartList[i].len = 0
        const len = Object.keys(cartList[i]?.productList).length
        // cartList[i].length = len
        for(var j in cartList[i].productList){
          cartList[i].len += cartList[i].productList[j].count
        }
        console.log(len)
        if(len>2){
          cartList[i].openBtn = true
        }
    }
    const changeOpen = (item) => {
      item.openShow = !item.openShow
    }
    console.log(cartList,'gg')
    return { shopName, productList, cartList, changeOpen }
  }
}
</script>

<style lang="scss" scoped>
@import '../../style/viriables.scss';
@import '../../style/mixins.scss';
.header{
  position: absolute;
  top:0;
  left: 0;
  right:0;
  height:.44rem;
  font-size: .16rem;
  color:#333;
  text-align: center;
  line-height: .44rem;

}
.content{
  position: absolute;
  z-index: -1;
  top: .44rem;
  left: 0;
  right:0;
  bottom: .5rem;
  overflow-y:scroll ;
  background: #f8f8f8
}
.products {
  margin: .16rem .18rem .1rem .18rem;
  background: $bgColor;
  position: relative;
  // height: auto;
  // overflow-y:scroll ;
//  min-height: 1.16rem;
// bottom: .16rem;
padding-bottom: .16rem;
  &__title {
    padding: .16rem;
    font-size: .16rem;
    color: $content-fontcolor;
  }
  &__wrapper {
      height: auto;
    left: 0;
    right: 0;
    // bottom: .2rem;
    top: .2rem;

  }
  &__list {
    background: $bgColor;
  }
  &__item {
    position: relative;
    display: flex;
    margin: 0 .16rem 0.16rem .16rem;
    &__img {
      width: .46rem;
      height: .46rem;
      margin-right: .16rem;
      // transition: all .5s ease 0s;
    }
    &__detail {
      flex: 1;
    }
    &__title {
      margin: 0;
      line-height: .2rem;
      font-size: .14rem;
      color: $content-fontcolor;
      @include ellipsis;
    }
    &__price {
      display: flex;
      margin: .06rem 0 0 0;
      line-height: .2rem;
      font-size: .14rem;
      color: $hightlight-fontColor;
    }
    &__total {
      flex: 1;
      text-align: right;
      color: $dark-fontColor;
    }
    &__yen {
      font-size: .12rem;
    }
  }
  &_open{
    width:3.07rem;
    height: .28rem;
    line-height: .28rem;
    margin:0 .16rem;
    background: #f5f5f5;
     color:#999;
    // display: flex;
    text-align: center;
    &_content{
      display: inline;
      font-size: .14rem; 
    }
    &_btn{
      display: inline;
    }
  }
}
</style>